<template>
  <div class="content">
    <HeaderView type="2" @searchingBtn="searchingBtn" />
    <div class="table-left">
      <div class="left-aside">
        <div class="aside-title">归档照片</div>
        <div class="aside-img">
          <div class="aside-img-big">
            <img :src="'/httpImage/' + personInfo.personPicUrl" fit="fill" />
          </div>
          <!-- <div class="aside-img-right">
            <el-image :src="'http://'+item.personPicUrl" fit="fill">
            </el-image>
          </div> -->
        </div>
        <div class="tab-box">
          <div class="tab-title">
            <div
              @click="activeClick(1)"
              :class="
                activeName == 1 ? 'tab-title-item blue' : 'tab-title-item'
              "
            >
              <span>|</span>基本信息
            </div>
            <div
              @click="activeClick(2)"
              :class="
                activeName == 2 ? 'tab-title-item blue' : 'tab-title-item'
              "
            >
              <span>|</span>实名信息
            </div>
            <div
              @click="activeClick(3)"
              :class="
                activeName == 3 ? 'tab-title-item blue' : 'tab-title-item'
              "
            >
              <span>|</span>相似档案
            </div>
          </div>
          <div class="tab-bottom" v-if="activeName == 1">
            <div class="tab-b-item">档案编号：{{ personInfo.id || "--" }}</div>
            <div class="tab-b-item">档案标签：{{ personInfo.id2 || "--" }}</div>
            <div class="tab-b-item">
              小区：{{ personInfo.residentialArea || "--" }}
            </div>
            <div class="tab-b-item">
              社区：{{ personInfo.community || "--" }}
            </div>
            <div class="tab-b-item">
              建档时间：{{ personInfo.createTime || "--" }}
            </div>
            <div class="tab-b-item">
              档案地点：{{ personInfo.location || "--" }}
            </div>
            <div class="tab-b-item">
              抓拍次数：{{ personInfo.snapshotCount || "--" }}
            </div>
            <div class="tab-b-item">
              出现天数：{{ personInfo.daysAppeared || "--" }}
            </div>
            <div class="tab-b-item">
              最后出现时间：{{ personInfo.lastAppearanceTime || "--" }}
            </div>
          </div>
          <div class="tab-bottom" v-if="activeName == 2">
            <div class="tab-b-item">
              姓名：{{ personInfo.personName || "--" }}
            </div>
            <div class="tab-b-item">性别：{{ personInfo.sex || "--" }}</div>
            <div class="tab-b-item">年龄：{{ personInfo.age || "--" }}</div>
            <div class="tab-b-item">
              身份证号：{{ personInfo.idCard || "--" }}
            </div>
            <div class="tab-b-item">
              手机号码：{{ personInfo.phoneNum || "--" }}
            </div>
          </div>
          <div class="btn-view">
            <div class="common-btn" @click="archivesMergeClick">
              <SvgIcon
                icon-class="danganhebing"
                style="width: 19.5px; height: 19.5px"
              />
              <div class="common-btn-label">档案合并</div>
            </div>
            <div class="common-btn" @click="activityTrajectory">
              <SvgIcon
                icon-class="danganhebing"
                style="width: 19.5px; height: 19.5px"
              />
              <div class="common-btn-label">活动轨迹</div>
            </div>
          </div>
          <div class="tab-bottom" v-if="activeName == 3">
            暂无数据
            <!-- <div class="tab-b-item">档案编号：{{ personInfo.id ||'--'}}</div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="table-right">
      <div class="card_list">
        <div
          class="card-item"
          v-for="(listItem, index) in tableData"
          :key="index"
        >
          <div class="card-title">{{ listItem.likeDate || "--" }}</div>
          <div
            class="box-card"
            v-for="(item, sonIndex) in listItem.list"
            :key="sonIndex"
          >
            <div class="card_left">
              <div class="image_box" @click="detailsBtn(item, index, sonIndex)">
                <!-- <el-image
                  :src="'http://'+item.picSmUrl" 
                  fit="fill">
                </el-image> -->
                <img :src="'/httpImage/' + item.picSmUrl" />
                <!-- <p>无业游民{{ item }}</p> -->
              </div>
            </div>
            <div class="card_right">
              <div class="day-big">{{ item.compareScore || "--" }}</div>
              <div>
                小区：<span>{{ item.cameraAddr || "--" }}</span>
              </div>
              <div class="right-grey-item">
                机构：<span>{{ item.orgName || "--" }}</span>
              </div>
              <div class="right-grey-item">
                出现地点：<span>{{ item.cameraName || "--" }}</span>
              </div>
              <div class="right-grey-item">
                出现时间：<span>{{ item.likeDate2 || "--" }}</span>
              </div>
              <div
                class="detail-item"
                @click="detailsBtn(item, index, sonIndex)"
              >
                <i class="el-icon-tickets"></i>
                详情
              </div>
              <div
                class="detail-save-img"
                title="替换为档案图片"
                @click="landscapeClick(item, index)"
              >
                <SvgIcon
                  icon-class="landscape-fill"
                  style="width: 22px; height: 22px"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-pager">
        <PagerView
          class="page"
          :pageSizes="[15, 30]"
          layout="sizes, prev, pager, next"
          :pager-options="pagerOptions"
          v-on="pagerEvents"
        />
      </div>
    </div>
    <!-- 预览图片 -->
    <PreviewImageDialog :edit-common-config="editConfig" />
    <!-- 档案合并 -->
    <ArchivesMergeDialog
      :editFormDialog="archivesMergeData"
    ></ArchivesMergeDialog>
    <ActivityTrajectoryDialog
      ref="activityTrajectoryRef"
    ></ActivityTrajectoryDialog>
  </div>
</template>

<script>
import HeaderView from "@/views/statisticsQuery/components/headerView";
import pageMixin from "@/components/makepager/pager/mixin/pageMixin";
import PreviewImageDialog from "@/views/panoramicData/components/PreviewImageDialog";
import {
  getPersonDocumentInfo,
  getSearchList,
  personImageReplace,
} from "@/api/statisticsQueryManage/portraitFilingPage";
import ArchivesMergeDialog from "@/views/statisticsQuery/portraitFilingPage/archivesMergeDialog";
import NewDate from "@/api/date";
import ActivityTrajectoryDialog from "@/components/dialog/ActivityTrajectoryDialog.vue";
const { formatDate2 } = NewDate;
export default {
  name: "portraitFilingPage",
  mixins: [pageMixin],
  props: {},
  components: {
    HeaderView,
    PreviewImageDialog,
    ArchivesMergeDialog,
    ActivityTrajectoryDialog,
  },
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      activeName: 1,
      tableData: [],
      personInfo: {},
      portraitFilingDetailsForm: {
        searchTime: [
          this.$moment(new Date())
            .subtract(1, "months")
            .format("YYYY-MM-DD 00:00:00"),
          this.$moment().format("YYYY-MM-DD 23:59:59"),
        ],
        page: 1,
        size: 15,
        sort: "desc",
        documentNumber: "",
      },
      pagerOptions: {
        currPage: 1,
        pageSize: 15,
        totalCount: 0,
      },
      editConfig: {
        visible: false,
        infomation: [],
        personIndex: 0,
        currentId: "",
        isLookImg: false,
        tabs: [],
        personPicUrl: "",
      },
      tableDataOld: [],
      archivesMergeData: {
        visible: false,
        title: "档案合并",
        infomation: {},
      },
    };
  },
  mounted() {
    this.getInfo();
    this.getData();
  },
  watch: {},
  methods: {
    activityTrajectory() {
      this.$refs.activityTrajectoryRef.add();
    },
    activeClick(val) {
      this.activeName = val;
    },
    searchingBtn(form) {
      // 上面的搜索列表
      this.portraitFilingDetailsForm.searchTime = form.searchTime
        ? [
            this.$moment(form.searchTime[0]).format("YYYY-MM-DD HH:mm:ss"),
            this.$moment(form.searchTime[1]).format("YYYY-MM-DD HH:mm:ss"),
          ]
        : [];
      this.portraitFilingDetailsForm.sort = form.orderType;
      this.getData();
    },
    async getInfo() {
      let params = {};
      params.id = this.$route.query.id;
      var res = await getPersonDocumentInfo(params);
      this.personInfo = res.data || {};
      this.personInfo.lastAppearanceTime = formatDate2(
        this.personInfo.lastAppearanceTime * 1000
      );
    },
    async getData() {
      this.portraitFilingDetailsForm.page = this.pagerOptions.currPage;
      this.portraitFilingDetailsForm.size = this.pagerOptions.pageSize;
      let params = JSON.parse(JSON.stringify(this.portraitFilingDetailsForm));
      params.documentNumber = this.$route.query.id;
      var res = await getSearchList(params);
      const arr = res.data.datalist || [];
      let newArr = [];
      let obj = {};
      for (let i in arr) {
        arr[i].likeDate = arr[i].activeObject.likeDate.split(" ")[0];
        arr[i].likeDate2 = arr[i].activeObject.likeDate;
        arr[i].picSmUrl = arr[i].activeObject.targetInfo[0].picSmUrl;
        if (arr[i].activeObject.baseInfo) {
          arr[i].compareScore =
            arr[i].activeObject.baseInfo[0].compareScore + "%" || "";
        } else {
          arr[i].compareScore = "";
        }
        arr[i].targetScore =
          arr[i].activeObject.targetInfo[0].targetScore + "%";
        arr[i].cameraAddr = arr[i].activeObject.cameraAddr;
        arr[i].orgName = arr[i].activeObject.orgName
          ? arr[i].activeObject.orgName
          : "";
        arr[i].cameraName = arr[i].activeObject.cameraName;
      }
      for (let i in arr) {
        if (!obj[arr[i].likeDate]) {
          let item = {};
          item.likeDate = arr[i].likeDate;
          item.list = [];
          item.list.push(arr[i]);
          newArr.push(item);
          obj[arr[i].likeDate] = arr[i];
        } else {
          for (let j in newArr) {
            if (newArr[j].likeDate == arr[i].likeDate) {
              newArr[j].list.push(arr[i]);
            }
          }
        }
      }
      this.tableData = newArr || [];
      this.tableDataOld = arr || [];
      this.pagerOptions.totalCount = res.data.total;
    },
    detailsBtn(data, index, sonIndex) {
      // let number=Number(index)+Number(sonIndex)
      this.editConfig.isLookImg = true;
      let sanpObj = this.tableData[index].list[sonIndex].activeObject;
      this.editConfig.infomation = this.tableDataOld;
      this.editConfig.currentId = sanpObj.id;
      // this.editConfig.personIndex = number
      this.editConfig.noLookMore = true;
      this.editConfig.visible = true;
      this.editConfig.personPicUrl = this.personInfo.personPicUrl;
    },
    //
    landscapeClick(data) {
      // console.log(data, index)
      this.$confirm(`是否替换成档案图片？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.personImageReplace(data);
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
    async personImageReplace(data) {
      await personImageReplace({
        id: data.activeObject.id,
        data: data,
        personID: this.personInfo.id,
        imageUrl: data.activeObject.targetInfo[0].picSmUrl,
      }).then((res) => {
        console.log(res);
        this.$message.success("替换档案图成功");
        this.getInfo();
      });
    },
    // 档案合并点击方法
    archivesMergeClick() {
      console.log(this.personInfo, "详情row");
      this.archivesMergeData.infomation = this.personInfo;
      this.archivesMergeData.visible = true;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .table-left {
    width: 300px !important;
    height: calc(100% - 120px);
    box-sizing: border-box;
    // height: unset !important;
    // padding:10px;
    margin-right: 35px;
    background-image: url("@/assets/images/background_aside.jpg");
    background-size: 100% 100%;
    // background-size: contain;
    background-repeat: no-repeat;
    /* 不重复背景图片 */
    float: left;
    margin-top: 24px;
    overflow: auto;
    .left-aside {
      margin: 20px 10px 10px 10px;
      padding: 15px 18px;
      min-height: 350px;
      background-color: rgba(154, 193, 240, 0.2);
      border-radius: 4px;
      height: calc(100% - 70px);
      .aside-title {
        border-left: 5px solid rgba(50, 142, 255, 1);
        padding-left: 10px;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 15px;
      }
      .aside-img {
        width: 100%;
        height: 200px;
        margin-left: 10px;
      }
      .aside-img-big {
        width: 172px;
        height: 172px;
        float: left;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .aside-img-right {
        width: 65px;
        border-radius: 5px;
        overflow: hidden;
        float: right;
        margin-top: -17px;
      }
      .tab-box {
        width: 100%;
        height: calc(100% - 200px - 30px);
        position: relative;
        .tab-title {
          width: 100%;
          overflow: hidden;
        }

        .tab-title-item {
          height: 30px;
          line-height: 30px;
          padding: 0 8px;
          background: rgba(27, 126, 242, 0.3);
          border-radius: 8px;
          font-size: 12px;
          float: left;
          margin-right: 5px;
          color: #999;
          cursor: pointer;
          &:nth-of-type(3) {
            margin-right: 0;
          }
          span {
            width: 3px;
            background: rgba(41, 241, 250, 1);
            margin-right: 8px;
          }
        }
        .blue {
          background: rgba(27, 126, 242, 0.6);
          color: #fff;
        }
        .tab-bottom {
          font-size: 12px;
          height: calc(100% - 50px - 35px - 40px);
          overflow-y: auto;
          padding: 25px 0 10px;
          line-height: 28px;
        }
        .tab-b-item {
          margin-bottom: 6px;
        }
        .btn-view {
          position: absolute;
          left: 0;
          bottom: 0px;
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          .common-btn {
            // margin-left: 26px;
            width: 130px;
            height: 40px;
            border-radius: 60px;
            opacity: 1;
            background: rgba(10, 26, 52, 0.6);
            border: 1px solid rgba(89, 175, 249, 0.7049);
            box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .common-btn-label {
              margin-left: 10px;
              font-family: "SourceHanSans";
              font-size: 16px;
              font-weight: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #01c2ff;
            }
          }
        }
      }
    }
  }
  .table-right {
    width: calc(100% - 300px - 35px);
    height: 100%;
    float: left;
    margin-top: 24px;
  }
  .card_list {
    width: calc(100% - 20px);
    height: calc(100% - 75px - 60px - 24px);
    overflow-y: auto;
    margin-right: 20px;
    .card-item {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .card-title {
      width: 100%;
      border-left: 5px solid rgba(50, 142, 255, 1);
      padding-left: 10px;
      color: #fff;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 10px;
    }
    .box-card {
      width: calc(33% - 20px);
      height: 160px;
      box-sizing: border-box;
      float: left;
      opacity: 1;
      background: rgba(46, 94, 171, 0.3);
      border: 3px solid rgba(51, 254, 254, 0.3);
      box-shadow: inset 0px 1px 10px 0px rgba(3, 251, 255, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      margin-right: 20px;
      margin-bottom: 20px;
      padding: 15px 12px;
      cursor: pointer;
      &:nth-of-type(3n) {
        // margin-right:0;
      }
      &:hover {
        border: 3px solid #33fefe;
        box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
      }
      .card_left {
        width: 124px;
        height: 124px;
        box-sizing: border-box;
        margin-right: 12px;
        .image_box {
          width: 124px;
          height: 124px;
          display: inline-block;
          position: relative;
          cursor: pointer;

          .el-image,
          img {
            width: 100%;
            height: 100%;
            border-radius: 26px;
            display: inline-block;
            position: relative;
            border: 0;
            font-size: 0;
            box-sizing: border-box;
            color: rgba(46, 94, 171, 0.3);
          }
          p {
            width: 100%;
            margin: 0;
            border-bottom-left-radius: 26px;
            border-bottom-right-radius: 26px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            line-height: 20px;
            opacity: 1;
            background: rgba(21, 21, 21, 0.5);
          }
        }
      }
      .card_right {
        width: calc(100% - 126px - 12px);
        height: calc(100% - 3px);
        margin-top: 3px;
        color: #fff;
        box-sizing: border-box;
        font-size: 13px;
        font-weight: bold;
        line-height: 22px;
        position: relative;
        .day-big {
          font-size: 18px;
          line-height: 28px;
          color: rgba(255, 1, 1, 1);
        }
        .right-grey-item {
          font-size: 12px;
          font-weight: 200;
        }
        .detail-item {
          position: absolute;
          right: 10px;
          top: 0;
          cursor: pointer;
          font-size: 12px;
          font-weight: 200;
        }
        .detail-save-img {
          width: 22px;
          height: 22px;
          position: absolute;
          right: 15px;
          bottom: 10px;
          cursor: pointer;
        }
        .add-item {
          position: absolute;
          right: 10px;
          bottom: 0;
          font-size: 23px;
          cursor: pointer;
        }
      }
    }
  }
  .btn-pager {
    width: calc(100% - 40px);
    justify-content: left;
    position: relative;
  }
}
</style>
